<template>
	<view>
		<custom-header :back="false" title="亚拍鲜花" />
		<scroll-view
			:scroll-y="true" 
			scroll-with-animation
			:style="{height:'calc(100vh - '+statusBarHeight+'px)'}"
			class="scroll_content_wrap">
				<view class="header_bg"></view>
				<view class="content">
					<view class="header">
						<view class="left" @click="handleSet">
							<view class="tx">
								<image :src="shopInfo.avatarId || 'https://goods-1312936761.cos.ap-chongqing.myqcloud.com/applet/supplier/my/tx.jpg'" mode=""></image>
							</view>
							<view class="check_status">{{shopInfo.shopStatus}}</view>
						</view>
						<view class="center">
							<view class="name_vip_question">
								<view class="name">{{shopInfo.shopName}}</view>
								<view class="vip" @click="handleGoPage('/pages/salesGrade/salesGrade')">
									<view class="icon">
										<image src="https://goods-1312936761.cos.ap-chongqing.myqcloud.com/applet/supplier/my/vip.png"></image>
									</view>
									<view class="text">{{shopInfo.shopLevel}}</view>
								</view>
								<view class="question" @click="handleGoPage('/pages/salesGrade/salesGrade')">
									<image src="https://goods-1312936761.cos.ap-chongqing.myqcloud.com/applet/supplier/my/query.png" mode=""></image>
								</view>
							</view>
							<view class="satisfaction_code">
								<view class="satisfaction">
									<view class="text">满意</view>
									<view class="value">{{shopInfo.satisfaction}}%</view>
								</view>
								<view class="code">
									代码：{{shopInfo.shopCode}}
								</view>
							</view>
						</view>
						<view class="right">
							<view 
								hover-class="custom_hover"
								:hover-stay-time="200"
								class="msg"
								@click="handleGoPage('/pages/myMessage/myMessage')">
								<view class="icon">
									<image src="https://goods-1312936761.cos.ap-chongqing.myqcloud.com/applet/supplier/my/bell.png" mode=""></image>
								</view>
								<view class="text">
									消息
								</view>
								<view class="number">
									9+
								</view>
							</view>
							<view 
								hover-class="custom_hover"
								:hover-stay-time="200"
								class="scan"
								@click="handleScanCode">
								<view class="icon">
									<image src="https://goods-1312936761.cos.ap-chongqing.myqcloud.com/applet/supplier/my/scan.png" mode=""></image>
								</view>
								<view class="text">
									签到
								</view>
							</view>
						</view>
					</view>
					<view class="turnover_wrap">
						<view class="tu_list">
							<view class="number">
								<text class="integer">{{reportInfo.lastMonthAmount?.int || 0}}.</text>
								<text class="decimal">{{reportInfo.lastMonthAmount?.dec || '00'}}元</text>
							</view>
							<view class="text">上月成交</view>
						</view>
						<view class="tu_list">
							<view class="number">
								<text class="integer">{{reportInfo.todayAmount?.int || 0}}.</text>
								<text class="decimal">{{reportInfo.todayAmount?.dec || '00'}}元</text>
							</view>
							<view class="text">今日成交</view>
						</view>
						<view class="tu_list">
							<view class="number">
								<text class="integer">{{reportInfo.recentNum?.int || 0}}.</text>
								<text class="decimal">{{reportInfo.recentNum?.dec || '00'}}扎</text>
							</view>
							<view class="text">近三十天成交</view>
						</view>
					</view>
					<view class="banner_wrap" @click="handleGoPage('/pages/platformNoticeDetail/platformNoticeDetail')">
						<image src="/static/common/my_banner.png" mode=""></image>
					</view>
					<view class="inform_wrap">
						<view class="icon">
							<image src="https://goods-1312936761.cos.ap-chongqing.myqcloud.com/applet/supplier/my/trumpet.png" mode=""></image>
						</view>
						<view class="text">
							<swiper 
								class="inform_swiper" 
								circular 
								:indicator-dots="false" 
								:autoplay="true" 
								:interval="3000"
								 vertical>
								<swiper-item 
									v-for="(item,index) in informList" 
									:key="index" 
									@click="handleInformDetail(item)">
										{{ item.content }}
								</swiper-item>
							</swiper>
						</view>
					</view>
					<view class="header_nav">
						<view class="title_more">
							<view class="title">数据统计</view>
							<view 
								class="more"
								hover-class="custom_hover"
								:hover-stay-time="200"
								@click="handleGoStatistics">
								<view class="text">查看详情</view>
								<view class="icon">
									<image src="/static/common/right.png" mode="widthFix"></image>
								</view>
							</view>
						</view>
						<view class="nav_list">
							<view class="nav">
								<view class="number">
									<text class="integer">{{reportOverview.noEnterNum}}</text>
									<text class="decimal">次</text>
								</view>
								<view class="text">本月迟到</view>
							</view>
							<view class="nav">
								<view class="number">
									<text class="integer">{{reportOverview.lowerQuantity}}</text>
									<text class="decimal">扎</text>
								</view>
								<view class="text">本月降级</view>
							</view>
							<view class="nav">
								<view class="number">
									<text class="integer">{{reportOverview.lackQuantity}}</text>
									<text class="decimal">扎</text>
								</view>
								<view class="text">本月缺货</view>
							</view>
						</view>
					</view>
					
					<!-- <view 
						class="wallet_wrap" 
						hover-class="custom_hover" 
						:hover-stay-time="200"
						@click="hanldeGoWallet">
						<view class="title">我的钱包</view>
						<view class="money">
							<view class="m1">
								<view class="text">可用余额</view>
								<view class="number">￥888.98</view>
							</view>
							<view class="border"></view>
							<view class="m2">
								<view class="text">待结算</view>
								<view class="number">￥8888.68</view>
							</view>
						</view>
						<view class="more">
							<image src="/static/common/right.png" mode=""></image>
						</view>
					</view> -->
					<view
						class="wallet_wrap_new" 
						hover-class="custom_hover" 
						:hover-stay-time="200"
						@click="hanldeGoWallet">
						<view class="wa">
							<view class="number">
								<text class="integer">888</text>
								<text class="decimal">.98元</text>
							</view>
							<view class="text">可用余额</view>
						</view>
						<view class="wa">
							<view class="number">
								<text class="integer">4567</text>
								<text class="decimal">.26元</text>
							</view>
							<view class="text">待结算</view>
						</view>
						<view class="wa">
							<view class="icon">
								<image src="https://goods-1312936761.cos.ap-chongqing.myqcloud.com/applet/supplier/my/wallet_icon.png" mode="widthFix"></image>
							</view>
							<view class="text">我的钱包</view>
						</view>
						
					</view>
					<!-- 实时订单 -->
					<view class="real_time_order">
						<view class="info">
							<view class="status_number">
								<view class="icon">
									<image src="https://goods-1312936761.cos.ap-chongqing.myqcloud.com/applet/supplier/my/order_icon.png" mode=""></image>
								</view>
								<view class="text">
									接单中（今日累计：<text>{{totalQuantity}}</text>扎）
								</view>
							</view>
							<view 
								class="btn" 
								hover-class="custom_hover" 
								:hover-stay-time="200"
								 @click="handleGoOrder">实时订单</view>
						</view>
						<view class="hint">17:00停止接单可开始送货</view>
					</view>
					<!-- 专属客服 -->
					<view class="service_wrap">
						<view class="title">专属客服（{{customerConfig.customerTime}}）</view>
						<view class="ser_info">
							<view class="tx">
								<image :src="customerConfig.customerAvatar || 'https://goods-1312936761.cos.ap-chongqing.myqcloud.com/applet/supplier/my/service_tx.png'" mode=""></image>
							</view>
							<view class="info">
								<view class="name">{{customerConfig.customerName}}</view>
								<view class="phone_wechat">
									<view class="phone">
										<view class="icon">
											<image src="https://goods-1312936761.cos.ap-chongqing.myqcloud.com/applet/supplier/my/phone_icon.png" mode=""></image>
										</view>
										<view class="text">
											{{customerConfig.customerPhone}}
										</view>
									</view>
									<view class="wechat">
										<view class="icon">
											<image src="https://goods-1312936761.cos.ap-chongqing.myqcloud.com/applet/supplier/my/wechat_icon.png" mode=""></image>
										</view>
										<view class="text">
											{{customerConfig.customerWechatCode}}
										</view>
									</view>
								</view>
							</view>
							<view class="qrcode" @click="isShowQrCode = true">
								<image :src= "customerConfig.qrcode || 'https://goods-1312936761.cos.ap-chongqing.myqcloud.com/applet/supplier/my/qr_code_icon.png'" mode=""></image>
							</view>
						</view>
						<view class="hint">
							投诉建议：18054126698
						</view>
					</view>
					<!-- 服务与工具 -->
					<view class="tool_wrap">
						<view class="title">服务与工具</view>
						<view class="list_wrap">
							<view 
								class="list nav01" 
								hover-class="custom_hover" 
								:hover-stay-time="200"
								@click="handleGoPage('/pages/employeeAccount/employeeAccount')">
								<view class="icon">
									<image src="https://goods-1312936761.cos.ap-chongqing.myqcloud.com/applet/supplier/my/nav01.png" mode=""></image>
								</view>
								<view class="text">员工账号</view>
							</view>
							<view 
								class="list nav02" 
								hover-class="custom_hover" 
								:hover-stay-time="200"
								@click="handleGoPage('/pages/billSettlement/billSettlement')">
								<view class="icon">
									<image src="https://goods-1312936761.cos.ap-chongqing.myqcloud.com/applet/supplier/my/nav02.png" mode=""></image>
								</view>
								<view class="text">账单结算</view>
							</view>
							<view 
								class="list nav03" 
								hover-class="custom_hover" 
								:hover-stay-time="200"
								@click="handleGoPage('/pages/afterSale/afterSale')">
								<view class="icon">
									<image src="https://goods-1312936761.cos.ap-chongqing.myqcloud.com/applet/supplier/my/nav03.png" mode=""></image>
								</view>
								<view class="text">售后理赔</view>
							</view>
							<view 
								class="list nav04" 
								hover-class="custom_hover" 
								:hover-stay-time="200"
								@click="handleGoPage('/pages/myBankCard/myBankCard')">
								<view class="icon">
									<image src="https://goods-1312936761.cos.ap-chongqing.myqcloud.com/applet/supplier/my/nav04.png" mode=""></image>
								</view>
								<view class="text">我的银行卡</view>
							</view>
							<view class="list nav05" hover-class="custom_hover" :hover-stay-time="200">
								<view class="icon">
									<image src="https://goods-1312936761.cos.ap-chongqing.myqcloud.com/applet/supplier/my/nav05.png" mode=""></image>
								</view>
								<view class="text">平台代配</view>
							</view>
							<view 
								class="list nav06" 
								hover-class="custom_hover" 
								:hover-stay-time="200"
								@click="handleGoPage('/pages/platformNotice/platformNotice')">
								<view class="icon">
									<image src="https://goods-1312936761.cos.ap-chongqing.myqcloud.com/applet/supplier/my/nav06.png" mode=""></image>
								</view>
								<view class="text">平台公告</view>
							</view>
							<view 
								class="list nav07" 
								hover-class="custom_hover" 
								:hover-stay-time="200"
								@click="handleGoPage('/pages/platformSales/platformSales')">
								<view class="icon">
									<image src="https://goods-1312936761.cos.ap-chongqing.myqcloud.com/applet/supplier/my/nav07.png" mode=""></image>
								</view>
								<view class="text">平台代卖</view>
							</view>
							<view 
								class="list nav08" 
								hover-class="custom_hover" 
								:hover-stay-time="200"
								@click="handleGoPage('/pages/operationLog/operationLog')">
								<view class="icon">
									<image src="https://goods-1312936761.cos.ap-chongqing.myqcloud.com/applet/supplier/my/nav08.png" mode=""></image>
								</view>
								<view class="text">操作日志</view>
							</view>
							<view 
								class="list nav09" 
								hover-class="custom_hover" 
								:hover-stay-time="200"
								@click="handleGoPage('/pages/coupon/coupon')">
								<view class="icon">
									<image src="https://goods-1312936761.cos.ap-chongqing.myqcloud.com/applet/supplier/my/nav09.png" mode=""></image>
								</view>
								<view class="text">发券</view>
							</view>
							<view 
								class="list nav10" 
								hover-class="custom_hover" 
								:hover-stay-time="200"
								@click="handleGoPage('/pages/gradeStandard/gradeStandard')">
								<view class="icon">
									<image src="https://goods-1312936761.cos.ap-chongqing.myqcloud.com/applet/supplier/my/nav10.png" mode=""></image>
								</view>
								<view class="text">等级标准</view>
							</view>
							<!-- <view 
								class="list nav11" 
								hover-class="custom_hover" 
								:hover-stay-time="200"
								@click="handleGoPage('/pages/businessInfo/businessInfo')">
								<view class="icon">
									<image src="https://goods-1312936761.cos.ap-chongqing.myqcloud.com/applet/supplier/my/nav11.png" mode=""></image>
								</view>
								<view class="text">商家资料</view>
							</view> -->
							<view 
								class="list nav12" 
								hover-class="custom_hover" 
								:hover-stay-time="200"
								@click="handleGoPage('/pages/myEvaluation/myEvaluation')">
								<view class="icon">
									<image src="https://goods-1312936761.cos.ap-chongqing.myqcloud.com/applet/supplier/my/nav12.png" mode=""></image>
								</view>
								<view class="text">我的评价</view>
							</view>
							<view 
								class="list nav13" 
								hover-class="custom_hover" 
								:hover-stay-time="200"
								@click="handleGoPage('/pages/complaintFeedback/complaintFeedback')">
								<view class="icon">
									<image src="https://goods-1312936761.cos.ap-chongqing.myqcloud.com/applet/supplier/my/nav13.png" mode=""></image>
								</view>
								<view class="text">投诉反馈</view>
							</view>
						</view>
					</view>
				</view>
		</scroll-view>
		<!-- 客服二维码 -->
		<up-popup :show="isShowQrCode" mode="center" :round="10" @open="">
			<view class="code_content_wrap">
				<view class="code">
					<image 
						src="https://goods-1312936761.cos.ap-chongqing.myqcloud.com/applet/supplier/my/qrcode.png" 
						mode="widthFix"
						show-menu-by-longpress></image>
				</view>
				<view class="btn_wrap">
					<view 
						class="btn cancel" 
						hover-class="custom_hover" 
						:hover-stay-time="200"
						@click="isShowQrCode = false;">取消</view>
					<view 
						class="btn save" 
						hover-class="custom_hover" 
						:hover-stay-time="200"
						@click="isShowQrCode = false;">保存二维码</view>
				</view>
			</view>
		</up-popup>
	</view>
</template>

<script setup>
	import { ref,computed, onMounted } from 'vue'
	import { useStore } from 'vuex'
	import supplierApi from '@/api/supplier'
	import reportApi from '@/api/report'
	import { getCurrentMonthRange } from '@/utils/dateUtils'

	const store = useStore()
	// 店铺信息
	const shopInfo = ref({})

	const statusBarHeight = computed(()=>{
		return store.getters.statusBarHeight
	})
	
//  今日统计
const reportInfo = ref({
  lastMonthAmount: { int: 0, dec: '00' },
  todayAmount: { int: 0, dec: '00' },
  recentNum: { int: 0, dec: '00' }
});

const splitAmount = (num) => {
  const str = num.toFixed(2); // 保留两位小数
  const [int, dec] = str.split('.');
  return { int: parseInt(int), dec };
};

// 数据统计
const reportOverview = ref({})

// 接单数据
const totalQuantity = ref(0);

// k客服
const customerConfig = ref({})

	// 公告
	const informList = ref([
		{
			id:1,
			content:'母亲节备货最后关头，要买的花都帮你要买的花都帮你要买的花都帮你要买的花都帮你',
		},
		{
			id:2,
			content:'父亲节节备货最后关头，要买的花都帮你',
		},
		{
			id:3,
			content:'情人节节备货最后关头，要买的花都帮你',
		},
	])
	const handleInformDetail = (item)=>{
		uni.navigateTo({
			url:'/pages/platformNoticeDetail/platformNoticeDetail?id='+item.id
		})
	}
	
	
	// 客服二维码
	const isShowQrCode = ref(false)
	
	// 查看订单
	const handleGoOrder = ()=>{
		uni.navigateTo({
			url:'/pages/realTimeOrder/realTimeOrder'
		})
	}
	// 数据统计
	const handleGoStatistics = ()=>{
		uni.navigateTo({
			url:'/pages/statistics/statistics'
		})
	}
	// 我的钱包
	const hanldeGoWallet = ()=>{
		uni.navigateTo({
			url:'/pages/myWallet/myWallet'
		})
	}
	
	// 跳转页面
	const handleGoPage = (url)=>{
		uni.navigateTo({ url })
	}
	// 设置
	const handleSet = ()=>{
		uni.navigateTo({
			url:'/pages/set/set'
		})
	}
	// 调用扫一扫功能
	const handleScanCode = ()=>{
		uni.scanCode({
			success: (res) => {
				console.log("扫描结果",res)
			}	
		})
	}



		// 获取店铺
	const getShopDetail = async () => {
		try {
			const response = await supplierApi.getShopSimpleDetail();
			shopInfo.value = response;
		} catch (error) {
			console.error('店铺信息加载失败:', error);
		}
	};

	// 店铺统计
	const getReportInfo = async () => {
		try {
			const response = await reportApi.getReportInfo();
			if (response) {
				reportInfo.value = {
					lastMonthAmount: splitAmount(response.lastMonthAmount || 0),
					todayAmount: splitAmount(response.todayAmount || 0),
					recentNum: splitAmount(response.recentNum || 0),
				};
			}
		} catch (error) {
			console.warn('统计数据加载失败:', error);
			reportInfo.value = {
				lastMonthAmount: { int: 0, dec: '00' },
				todayAmount: { int: 0, dec: '00' },
				recentNum: { int: 0, dec: '00' },
			};
		}
	};

	//数据统计
	const getReportOverview = async () => {
		try {
			// 当月的时间范围
			const timeRange = getCurrentMonthRange();
			const params = {
				startTime: timeRange.startTime,
				endTime: timeRange.endTime,
			};
			const response = await reportApi.getReportOverview(params);
			reportOverview.value = response;
		} catch (error) {
			console.warn('概览数据加载失败:', error);
			reportOverview.value = {
				noEnterNum: 0,
				lowerQuantity: 0,
				lackQuantity: 0,
			};
		}
	};

	// 获取接单数据
	const getTotalQuantity = async () => {
		try {
			const response = await reportApi.getTotalQuantity();
			const quantity = response.result;
			if (typeof quantity === 'number' && !isNaN(quantity)) {
				totalQuantity.value = quantity;
			} else {
				totalQuantity.value = 0;
			}
		} catch (error) {
			console.warn('接单数据加载失败:', error);
			totalQuantity.value = 0;
		}
	};


	// k客服
	const getCustomer = async () => {
		try {
			const response = await supplierApi.getCustomerConfig();
			customerConfig.value = response;
		} catch (error) {
			// 客服信息是可选的，静默处理
			console.info('客服配置加载失败:', error);
	
		}
	};

	
	//  TODO  可能需要优化
	onMounted(() => {
		getShopDetail();
		getReportInfo();
		getReportOverview();
		getTotalQuantity();

		// getCustomer();
		// 视口下方的数据延迟加载
		 setTimeout(() => getCustomer(), 100);

	
})



</script>

<style lang="scss">
	.scroll_content_wrap{
		position: relative;
	}
	.header_bg{
		width: 100%;
		height: 430rpx;
		background: url(https://goods-1312936761.cos.ap-chongqing.myqcloud.com/applet/supplier/my/bg.png);
		background-size: cover;
		background-repeat: no-repeat;
		position: absolute;
		top: 0;
		left: 0;
		z-index: -1;
	}
	.content{
		padding: 0 20rpx 20rpx;
		.header{
			display: flex;
			padding: 30rpx 10rpx;
			.left{
				width: 108rpx;
				position: relative;
				.tx{
					width: 108rpx;
					height: 108rpx;
					border-radius: 50%;
					overflow: hidden;
				}
				.check_status{
					width: 83rpx;
					text-align: center;
					height: 32rpx;
					line-height: 32rpx;
					border-radius: 6rpx;
					background: #FCE4E3;
					color: #FF7A75;
					font-size: 20rpx;
					position: absolute;
					bottom: 0;
					left: 50%;
					margin-left: -41rpx;
				}
			}
			.center{
				flex: 1;
				padding-top: 5rpx;
				padding-left: 30rpx;
				.name_vip_question{
					display: flex;
					.name{
						font-weight: bold;
						color: #333333;
						font-size: 36rpx;
					}
					.vip{
						display: flex;
						align-items: center;
						padding-left: 20rpx;
						.icon{
							width: 28rpx;
							height: 23rpx;
							display: flex;
						}
						.text{
							font-size: 24rpx;
							color: #D689EE;
							font-weight: bold;
							padding-left: 10rpx;
						}
					}
					.question{
						width: 22rpx;
						height: 22rpx;
						padding-left: 20rpx;
					}
				}
				.satisfaction_code{
					display: flex;
					padding-top: 20rpx;
					.satisfaction{
						width: 124rpx;
						height: 32rpx;
						line-height: 32rpx;
						border: 1rpx solid #FF7770;
						display: flex;
						align-items: center;
						font-size: 20rpx;
						.text{
							width: 50rpx;
							height: 100%;
							background: #FF7770;
							color: #fff;
							text-align: center;
						}
						.value{
							padding-left: 5rpx;
							color: #FF7770;
							flex: 1;
						}
					}
					.code{
						color: #666;
						font-size: 26rpx;
						padding-left: 20rpx;
					}
				}
			}
			.right{
				display: flex;
				width: 130rpx;
				justify-content: space-between;
				padding-top: 22rpx;
				padding-right: 10rpx;
				.msg,.scan{
					text-align: center;
					width: 50rpx;
					.icon{
						width: 36rpx;
						height: 40rpx;
						margin:  0 auto;
						display: flex;
						justify-content: center;
						align-items: center;
					}
					.text{
						color: #666;
						font-size: 24rpx;
						padding-top: 10rpx;
					}
				}
				.msg{
					position: relative;
					.icon{
						image{
							width: 32rpx;
							height: 40rpx;
						}
					}
					.number{
						position: absolute;
						right:-16rpx;
						top: -12rpx;
						width: 32rpx;
						height: 24rpx;
						border-radius: 79rpx;
						background: #F5564D;
						text-align: center;
						line-height: 24rpx;
						font-size: 18rpx;
						color: #fff;
					}
				}
				.scan{
					.icon{
						image{
							width: 36rpx;
							height: 36rpx;
						}
					}
				}
			}
			
		}
		.turnover_wrap{
			display: flex;
			padding-top: 20rpx;
			.tu_list{
				flex: 1;
				text-align: center;
				.number{
					color: #333333;
					font-weight: bold;
					.integer{
						font-size: 32rpx;
					}
					.decimal{
						font-size: 20rpx;
					}
				}
				.text{
					color: #999999;
					font-size: 24rpx;
					padding-top: 10rpx;
				}
			}
		}
		.header_nav{
			border-radius: 20rpx;
			background: #FFFFFF;
			box-shadow: 0rpx 0rpx 24rpx rgba(0,0,0,0.05);
			margin-top: 20rpx;
			padding: 0 20rpx;
			.title_more{
				display: flex;
				justify-content: space-between;
				align-items: center;
				padding:30rpx 0 20rpx;
				.title{
					color: #333333;
					font-size: 28rpx;
					font-weight: bold;
				}
				.more{
					display: flex;
					align-items: center;
					.text{
						color: #BBBBBB;
						font-size: 24rpx;
						padding-right: 10rpx;
					}
					.icon{
						width: 10rpx;
						height: 20rpx;
						display: flex;
					}
				}
			}
			.nav_list{
				display: flex;
			}
			.nav{
				flex: 1;
				text-align: center;
				padding: 0rpx 20rpx 30rpx;
				.number{
					color: #333333;
					.integer{
						font-size: 32rpx;
					}
					.decimal{
						font-size: 20rpx;
					}
				}
				.text{
					font-size: 24rpx;
					color: #999999;
					padding-top: 15rpx;
				}
			}
		}
		.inform_wrap{
			display: flex;
			align-items: center;
			border-radius: 20rpx;
			background: #FFFFFF;
			margin-top: 20rpx;
			padding: 20rpx;
			.icon{
				width: 48rpx;
				height: 48rpx;
				display: flex;
			}
			.text{
				font-size: 28rpx;
				color: #666666;
				flex: 1;
				padding-left: 20rpx;
			}
		}
		.inform_swiper{
			height: 40rpx;
		}
		.wallet_wrap{
			display: flex;
			align-items: center;
			border-radius: 20rpx;
			background: #FFFFFF;
			margin-top: 20rpx;
			padding: 20rpx 40rpx 20rpx 20rpx;
			justify-content: space-between;
			.title{
				font-weight: bold;
				color: #333333;
				font-size: 28rpx;
			}
			.money{
				display: flex;
				.m1,.m2{
					width: max-content;
					text-align: center;
				}
				.border{
					height: 100rpx;
					width: 2rpx;
					background-color: #F2F2F2;
					margin:  0 30rpx;
				}
				.text{
					color: #666666;
					font-size: 24rpx;
					padding-top: 10rpx;
				}
				.number{
					font-weight: bold;
					color: #333333;
					font-size: 28rpx;
					padding-top: 15rpx;
				}
			}
			.more{
				width: 11rpx;
				height: 20rpx;
				display: flex;
			}
		}
		.wallet_wrap_new{
			display: flex;
			align-items: center;
			border-radius: 20rpx;
			background: #FFFFFF;
			margin-top: 20rpx;
			padding: 30rpx 20rpx;
			justify-content: space-between;
			.wa{
				flex: 1;
				text-align: center;
				.number{
					font-weight: bold;
					color: #333333;
					height: 50rpx;
					.integer{
						font-size: 32rpx;
					}
					.decimal{
						font-size: 20rpx;
					}
				}
				.icon{
					height: 50rpx;
					align-items: center;
					width: 40rpx;
					display: flex;
					margin: 0 auto;
					image{
						width: 40rpx;
						height: 32rpx;
					}
				}
				.text{
					color: #666666;
					font-size: 24rpx;
					padding-top: 10rpx;
				}
			}
		}
		.real_time_order{
			border-radius: 20rpx;
			background: #FFFFFF;
			margin-top: 20rpx;
			height: 180rpx;
			background: #FFE9F2;
			.info{
				border-radius: 20rpx;
				background: #FFFFFF;
				margin-top: 20rpx;
				height: 120rpx;
				background: #EA5C90;
				display: flex;
				align-items: center;
				justify-content: space-between;
				padding:  0 30rpx;
				.status_number{
					display: flex;
					align-items: center;
					.icon{
						width: 32rpx;
						height: 32rpx;
						display: flex;
					}
					.text{
						font-size: 28rpx;
						color: #fff;
						padding-left: 5rpx;
						text{
							font-weight: bold;
						}
					}
				}
				.btn{
					width: 120rpx;
					height: 40rpx;
					line-height: 40rpx;
					text-align: center;
					border-radius: 81rpx;
					background: #FFFFFF;
					color: #fff;
					font-size: 24rpx;
					color: #EA5C90;
				}
			}
			.hint{
				padding: 15rpx 20rpx 0;
				color: #EA5C90;
				font-size: 24rpx;
			}
		}
		.service_wrap{
			border-radius: 20rpx;
			background: #FFFFFF;
			margin-top: 20rpx;
			padding: 30rpx 20rpx 20rpx;
			.title{
				font-weight: bold;
				color: #333333;
				font-size: 28rpx;
			}
			.hint{
				color: #BBBBBB;
				font-size: 24rpx;
				padding-top: 20rpx;
				border-top: 1rpx solid #F2F2F2;
			}
			.ser_info{
				display: flex;
				align-items: center;
				padding: 20rpx 0;
				position: relative;
				.qrcode{
					width: 60rpx;
					height: 60rpx;
					position: absolute;
					top: -10rpx;
					right: 0;
				}
				.tx{
					width: 80rpx;
					height: 80rpx;
					display: flex;
				}
				.info{
					padding-left: 20rpx;
					.name{
						color: #333333;
						font-size: 28rpx;
					}
					.phone_wechat{
						display: flex;
						padding-top: 10rpx;
						.phone,.wechat{
							display: flex;
							align-items: center;
							.text{
								color: #666666;
								font-size: 28rpx;
								padding-left: 10rpx;
							}
							.icon{
								display: flex;
							}
						}
						.phone{
							.icon{
								width:23rpx;
								height: 24rpx;
							}
							
						}
						.wechat{
							padding-left: 50rpx;
							.icon{
								width:28rpx;
								height: 24rpx;
							}
						}
						
					}
				}
			}
		}
		.tool_wrap{
			border-radius: 20rpx;
			background: #FFFFFF;
			margin-top: 20rpx;
			padding: 30rpx;
			.title{
				color: #333333;
				font-size: 28rpx;
				font-weight: bold;
				text-align: center;
			}
			.list_wrap{
				display: flex;
				flex-wrap: wrap;
				justify-content: space-between;
				.list{
					width: 22%;
					text-align: center;
					margin-top: 40rpx;
					.icon{
						height: 52rpx;
					}
					.text{
						color: #666666;
						font-size: 24rpx;
						padding-top: 10rpx;
					}
				}
				.nav01 .icon image{
					width:48rpx;
					height: 38rpx;
				}
				.nav02 .icon image{
					width:38rpx;
					height: 48rpx;
				}
				.nav03 .icon image{
					width:48rpx;
					height: 38rpx;
				}
				.nav04 .icon image{
					width:48rpx;
					height: 38rpx;
				}
				.nav05 .icon image{
					width:39rpx;
					height: 47rpx;
				}
				.nav06 .icon image{
					width:46rpx;
					height: 34rpx;
				}
				.nav07 .icon image{
					width:40rpx;
					height: 45rpx;
				}
				.nav08 .icon image{
					width:46rpx;
					height: 52rpx;
				}
				.nav09 .icon image{
					width:48rpx;
					height: 38rpx;
				}
				.nav10 .icon image{
					width:36rpx;
					height: 46rpx;
				}
				.nav11 .icon image{
					width:40rpx;
					height: 48rpx;
				}
				.nav12 .icon image{
					width:44rpx;
					height: 44rpx;
				}
				.nav13 .icon image{
					width:43rpx;
					height: 44rpx;
				}
			}
		}
	}
	.code_content_wrap{
		.code{
			padding: 60rpx 60rpx 0;
			image{
				width: 323rpx;
				height: 360rpx;
			}
		}
		.btn_wrap{
			display: flex;
			justify-content: space-between;
			padding:40rpx;
			.btn{
				padding: 0 20rpx;
				height: 48rpx;
				line-height: 48rpx;
				opacity: 1;
				border-radius: 122rpx;
				border: 1rpx solid #F5564D;
				color: #F5564D;
				font-size: 24rpx;
			}
		}
	}
	.u-safe-bottom{
		display: none !important;
	}
	.banner_wrap{
		height: 160rpx;
		width: 100%;
		margin-top: 30rpx;
		image{
			width: 100%;
			height: 100%;
		}
	}
</style>
